<script setup lang="ts">
import type {Article} from '~/types/Article'

defineProps({
  article: {
    type: Object as () => Article,
    required: true,
    default: {} as Article
  }
})

</script>

<template>
  <div
      class="relative py-4 px-4 bg-white dark:bg-gray-900">
    <div class="relative flex flex-wrap items-center justify-between gap-6 mb-2 text-gray-500 dark:text-gray-500">
      <div
          class="inline-flex items-center flex-shrink-0 text-sm">
        <div class="relative inline-flex items-center flex-shrink-0 text-xs rounded-full h-8 w-8">
          <img class="rounded-full h-6 w-6 text-xs"
               :src="article.createUser.avatar"
               :alt="article.createUser.nickname"
          >
        </div>
        <div class="text-left line-clamp-1">
          <p class="font-medium">{{ article.createUser.nickname }}</p>
        </div>
      </div>
      <nuxt-link
          :to="`/u/${article.createUser._id}`"
      ><span class="absolute inset-0"></span>
      </nuxt-link>
      <div>
        <UTooltip text="举报">
          <UButton
              icon="i-heroicons-ellipsis-horizontal-solid"
              size="2xs"
              color="gray"
              variant="link"
              label=""
          />
        </UTooltip>
      </div>
    </div>

    <div>
      <div class="text-sm mb-2 dark:text-gray-300">
        {{ article.content }}
      </div>
      <div v-if="article.fromWho" class="text-sm mb-2 dark:text-gray-300">
        —— {{ article.fromWho }}「{{ article.from }}」
      </div>
    </div>
    <div class="relative flex items-center justify-between text-zinc-400 dark:text-gray-500">
      <div class="text-xs"> {{ timeAgo(article.createdAt) }}</div>
      <div class="flex justify-end items-center gap-1.5">
        <UButton
            icon="i-heroicons-heart-20-solid"
            size="2xs"
            color="gray"
            variant="link"
            :label="article.likeCount + ''"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.article-card {

}
</style>